﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserList.aspx.cs" Inherits="House客户端.UserList" %>

<!DOCTYPE html>
<script src="easyui/js/jquery-1.8.0.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>员工信息展示页面</title>
    <link href="jquery-easyui-1.5.2/themes/default/easyui.css" rel="stylesheet" />
    <link href="easyui/css/wu.css" rel="stylesheet" />
    <link href="easyui/css/icon.css" rel="stylesheet" />
</head>
<body>
    <!----查询用户信息---->
    <div>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="newuser()">添加用户</a>
        <%-- <input type="text" />&nbsp;&nbsp;<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="GetUser()">查询</a>--%>
        <input class="easyui-textbox" id="users_Name" data-options="prompt:'请输入用户名称'" style="width: 30%; height: 27px">
        <a href="#" class="easyui-linkbutton" plain="true" data-options="iconCls:'icon-search'" onclick="GetUser()" style="width: 80px; margin-bottom: 2px; margin-left: 10px; border: solid 1px #c0f6ef">查询</a>
    </div>
    <!----显示用户信息---->
    <div>
        <table id="dg" class="easyui-datagrid" title="显示用户信息" toolbar="#tb" rownumbers="true" pagination="true"></table>
    </div>
    <!----弹出框---->
    <div id="dlg" class="easyui-dialog" style="width: 400px; height: 200px; padding: 10px 20px; text-align: center" closed="true" buttons="#dlg-buttons">
        <form id="fm" method="post" action="">
            <div class="fitem">
                <label id="m">
                    编号：
                </label>
                <input name="ID" class="easyui-validatebox" required id="ID" />
            </div>
            <br />
            <div class="fitem">
                <label>
                    用户名称：</label>
                <input name="Users_Name" class="easyui-validatebox" required id="Users_Name" />
            </div>
            <br />
            <div class="fitem">
                <label>
                    员工账户：</label>
                <input name="Users_Account" class="easyui-validatebox" required id="Users_Account" />
            </div>
            <br />
            <div class="fitem">
                <label>
                    员工电话：</label>
                <input name="Users_TEL" class="easyui-validatebox" required id="Users_TEL" />
            </div>
            <br />

            <input type="hidden" name="action" id="hidtype" />
            <input type="hidden" name="roles_Id" id="Nameid" />
        </form>
    </div>
    <div id="dlg-buttons">
        <a class="easyui-linkbutton" onclick="saveuser()" iconcls="icon-save" id="upd">修改</a>
        <a class="easyui-linkbutton" iconcls="icon-save" id="save">保存</a>
        <a class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')" iconcls="icon-cancel">取消</a>
    </div>

    <script src="jquery-easyui-1.5.2/jquery.min.js"></script>
    <script src="jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
    <script src="jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
    <script src="jquery-easyui-1.5.2/easyloader.js"></script>
    <script src="jquery-easyui-1.5.2/Common.js"></script>
    <script>
        GetUser();
        //动态加载数据
        function GetUser() {
            var name = $('#users_Name').val();
            $.ajax({
                type: "get",
                url: WebApiURL + "/api/users?name=" + name,
                dataType: "json",
                success: function (obj) {
                    obj = eval(obj);
                    $("#dg").datagrid({
                        columns: [[
                        { field: 'ID', width: 150, title: '编号', align: 'center', closed: true },
                        { field: 'Users_Name', width: 150, align: 'center', title: '员工姓名' },
                        { field: 'Users_Account', width: 150, align: 'center', title: '员工账号' },
                        { field: 'Users_TEL', width: 150, align: 'center', title: '联系电话' },
                        {
                            field: 'Users_IsState', title: '状态',
                            formatter: function (value, row, index) {
                                return 'Users_IsState' == 0 ? '未启用' : '已启用'
                            }
                        },
                        { field: '_operate', align: 'center', formatter: formatOper, title: '操作' },
                        ]]
                    });
                    $("#dg").datagrid("loadData", obj);//动态取数据
                }
            })
        }
        //添加自定义删除修改按钮
        function formatOper(val, row, index) {
            return '<a href="#" onclick="editUser(' + index + ')">修改</a>&nbsp;&nbsp;<a href="#" onclick="DelRole(' + index + ')">删除</a>&nbsp;&nbsp;<a href="#" onclick="UpdateState(' + index + ')">启用</a>';
        }
        //显示弹出框
        function editUser(index) {
            $('#dg').datagrid('selectRow', index);//关键在这里  
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $('#dlg').dialog('open').dialog('setTitle', '修改用户信息');
                $('#fm').form('load', row);
            }
        }
        //修改用户
        function saveuser() {
            var id = $("#ID").val();
            var Users_Name = $("#Users_Name").val();
            var Users_Account = $("#Users_Account").val();
            var Users_TEL = $("#Users_TEL").val();
            $.ajax({
                type: "put",
                url: WebApiURL + "/api/users",
                data: {
                    ID: id,
                    Users_Account: Users_Account,
                    Users_Name: Users_Name,
                    Users_TEL: Users_TEL
                },
                success: function (result) {
                    alert(result);
                    if (result == true) {
                        $.messager.alert("提示信息", "操作成功");
                        $("#dlg").dialog("close");
                        show();
                    }
                    else {
                        $.messager.alert("提示信息", "操作失败");
                    }
                }
            })
        }
        //删除用户
        function DelRole(index) {
            $('#dg').datagrid('selectRow', index);
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $.ajax({
                    type: "delete",
                    url: WebApiURL + "/api/users?id=" + row.ID,
                    success: function (result) {
                        if (result == true) {
                            $.messager.alert("提示信息", "操作成功");
                            $("#dlg").dialog("close");
                            show();
                        }
                        else {
                            $.messager.alert("提示信息", "操作失败");
                        }
                    }
                })
            }
        }
        //添加用户
        function newuser() {
            $("#dlg").dialog("open").dialog('setTitle', '添加学生信息');;
            $("#fm").form("clear");
            $("#ID").hide();
            $("#m").hide();
            $("#upd").hide();
            $("#save").on("click",
                function () {
                    var Users_Name = $("#Users_Name").val();
                    var Users_Account = $("#Users_Account").val();
                    var Users_TEL = $("#Users_TEL").val();
                    $.ajax({
                        type: "post",
                        url: WebApiURL + "/api/users",
                        data: {
                            Users_Account: Users_Account,
                            Users_Name: Users_Name,
                            Users_TEL: Users_TEL
                        },
                        success: function (result) {
                            alert(result);
                            if (result == true) {
                                $.messager.alert("提示信息", "操作成功");
                                $("#dlg").dialog("close");
                                show();
                            }
                            else {
                                $.messager.alert("提示信息", "操作失败");
                            }
                        }
                    })
                }
                )
        }


        //修改状态
        function UpdateState(index) {
            $('#dg').datagrid('selectRow', index);
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $.ajax({
                    type: "post",
                    url: WebApiURL + '/api/users?id=' + row.ID + "&state=" + row.Users_IsState,
                    success: function (result) {
                        if (result == true) {
                            $.messager.alert("提示信息", "操作成功");
                            $("#dlg").dialog("close");
                            show();
                        }
                        else {
                            $.messager.alert("提示信息", "操作失败");
                        }
                    }
                })
            }
        }

    </script>
</body>
</html>
